<template>
  <div class="outmain ba_f">
    <div class="shuju_title">
      <div class="shuju_title_text">
        <span>排队取号</span>
      </div>
    </div>
    <div class="ba_f8 pad_20 mar_b20">
      <div class="lh25 msgtext fon_12">
        排号大屏幕：<span @click="chickScreen" class="subjectcolor2 curs">{{ path }}</span>。<br>
      </div>
    </div>
    <div class="pad_b_30 orderSeatch">
      <el-form :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
        <template>
          <el-form-item label="订单状态：">
            <el-radio-group v-model="formInline.state" @change="selectType">
              <el-radio-button label="0">不限</el-radio-button>
              <el-radio-button label="1">待叫号</el-radio-button>
              <el-radio-button label="2">已入座</el-radio-button>
              <el-radio-button label="3">过号/已取消</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </template>
        <el-form-item label="查询日期：" class="mar_t20">
          <div class="flex-bet">
            <div>
              <el-radio-group v-model="formInline.timeType" @change="selectType">
                <el-radio-button label="0">全部</el-radio-button>
                <el-radio-button label="1">今天</el-radio-button>
                <el-radio-button label="2">近七天</el-radio-button>
                <el-radio-button label="3">近十五天</el-radio-button>
                <el-radio-button label="4">具体日期</el-radio-button>
              </el-radio-group>
              <span class="mar_l20" v-if="formInline.timeType=='4'">
                <el-date-picker v-model="formInline.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" @change="selectType"></el-date-picker>
              </span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="模糊搜索：" label-position="top" class="mar_t20">
          <div class="flex">
            <div>
              <el-input type="text" v-model="formInline.keyword" style="width: 500px;"
                        placeholder="请输入订单相关的就餐号/手机号" @input="selectType"></el-input>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName2"  @tab-click="handleClick2">
      <template v-for="item in tablist">
        <el-tab-pane :label="item.name" :name="item.id">
          <template slot="label">{{item.name}}<el-badge :value="item.orderNum"></el-badge></template>
        </el-tab-pane>
      </template>
    </el-tabs>
    <div class="tabledata mar_t20 tableys">
      <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" class="tablecenter" stripe style="width: 100%">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="code" label="就餐号" width="80"></el-table-column>
        <el-table-column prop="people" label="就餐人数"></el-table-column>
        <el-table-column prop="name" label="餐桌类型"></el-table-column>
        <el-table-column prop="createdAt" label="取号时间"></el-table-column>
<!--        <el-table-column  label="用户信息" width="220">-->
<!--          <template slot-scope="scope">-->
<!--            <div class="flex pad_tb_10">-->
<!--                            <div class=""><img class="namelogo" v-bind:src="scope.row.portrait"/></div>-->
<!--              <div class="flex-col t_l">-->
<!--                <div class="overflowlnr">{{ scope.row.userName }}（UID:{{ scope.row.userId }}）</div>-->
<!--                <div class="overflowlnr">手机号：{{scope.row.tel}}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="stateName" label="状态">
          <template slot-scope="scope">
            <div class="textbutton">
              <el-tag class="tag3" v-show="scope.row.state==1" size="mini">待叫号</el-tag>
              <el-tag class="tag4" type="success" v-show="scope.row.state==2" size="mini">已入座</el-tag>
              <el-tag class="tag2" type="danger" v-show="scope.row.state==3" size="mini">已过号</el-tag>
              <el-tag class="tag1" type="info" v-show="scope.row.state==4" size="mini">已取消</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="450">
          <template slot-scope="scope">
            <div class="textbutton">
              <el-button type="primary" v-show="scope.row.state==1" @click="call(scope.row.id)"  round size="mini">叫号</el-button>
              <el-button type="info" v-show="scope.row.state==1"  @click="handleEdit(scope.row.id,'eat')" round size="mini">入座</el-button>
              <el-button type="warning" v-show="scope.row.state==1" @click="handleEdit(scope.row.id,'skip')" round size="mini">过号</el-button>
              <el-button type="danger" v-show="scope.row.state==1" @click="handleEdit(scope.row.id,'cancel')" round size="mini">取消</el-button>
              <el-button @click="handleEdit(scope.row.id,'print')" round size="mini">打印</el-button>

<!--              <el-button type="text" v-show="scope.row.state==1" @click="call(scope.row.id)" class="">呼叫</el-button>-->
<!--              <el-button type="text" v-show="scope.row.state==1" @click="handleEdit(scope.row.id,'eat')" class="">入座</el-button>-->
<!--              <el-button type="text" v-show="scope.row.state==1" @click="handleEdit(scope.row.id,'skip')" class="">过号</el-button>-->
<!--              <el-button type="text" v-show="scope.row.state==1" @click="handleEdit(scope.row.id,'cancel')" class="">取消</el-button>-->
<!--              <el-button type="text"  @click="handleEdit(scope.row.id,'print')" class="">打印</el-button>-->
<!--              <el-button type="text"  @click="handleEdit(scope.row.id,'del')" class="">删除</el-button>-->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="详情" width="130">
          <template slot-scope="scope">
            <div class="textbutton">
              <el-button @click="handleEdit2(scope.row)" type="text" size="mini">查看详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.size" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <edit ref="edit" @fetchData="fetchData"></edit>
    </div>
    <div style="height: 0; overflow: hidden">
      <pdqhPrint :data="printData" ref="pdqhprint" />
    </div>
  </div>
</template>
<script>
import {queuingList, modifyQueuing, typeList,callService} from '@/api/plug';
import Edit from "./components/edit";
import {mapState} from 'vuex'
import {changeDate} from "@/utils";
import index from "@/api";
import {getStoreBasic} from "@/api/shop";
import {orderContent} from '@/api/order';
import pdqhPrint from "@/components/printTem/pdqhPrint";
export default {
  components: {Edit,pdqhPrint},
  created() {
    this.getStoreBasic()
    this.queuingTypeList()
  },
  data() {
    return {
      form: {
        shopValue: '',
        timeType: '1',
        time: [new Date(), new Date()],
        Mtime: ''
      },
      formInline: {
        time: [new Date(), new Date()],
        timeType: '1',
        state: '0',
        origin: '0',
        keyword: '',
        payMode: '0',
        orderType: '2',
      },
      path: '',
      tablist:[],
      activeName2:'',
      list: [],
      listLoading: false,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      printData: {},
    };
  },
  methods: {
    async getStoreBasic(){
      const {data} = await getStoreBasic();
      if (data.id) {
        this.storeId = data.id
        this.init();
      }
    },
    async queuingTypeList(){
      var params = {
        timeType: this.formInline.timeType,
        startTime: this.formInline.timeType == '4' && this.formInline.time ? changeDate(this.formInline.time[0]) : '',
        endTime: this.formInline.timeType == '4' && this.formInline.time ? changeDate(this.formInline.time[1]) : '',
        state: this.formInline.state,
        keyword: this.formInline.keyword,
        storeId:''
      }
      const {data} = await typeList(params);
      this.tablist = data?data:[]
      this.activeName2 = data ? data[0].id:''
      this.fetchData();
    },
    async init() {
      const publishUrl = `https://bkycms.com/addons/yb_wm/views/channel/index/index.html#/queuingcode?storeId=${this.storeId}`;
      const backendPath = index.isDev ? publishUrl : location.href.match(/(\S*)views/)[1] + `views/channel/index/index.html#/queuingcode?storeId=${this.storeId}`;
      this.path = backendPath
    },
    async fetchData() {
      // this.listLoading = true;
      var params = {
        timeType: this.formInline.timeType,
        startTime: this.formInline.timeType == '4' && this.formInline.time ? changeDate(this.formInline.time[0]) : '',
        endTime: this.formInline.timeType == '4' && this.formInline.time ? changeDate(this.formInline.time[1]) : '',
        state: this.formInline.state,
        keyword: this.formInline.keyword,
        page: this.page.currentPage,
        typeId: this.activeName2,
        storeId:''
      };
      const { data, count } = await queuingList(params);
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
    },
    handleEdit2(row) {
      if (row.id) {
        this.$refs["edit"].showEdit(row);
      } else {
        this.$refs["edit"].showEdit();
      }
    },
    selectType() {
      this.queuingTypeList()
      // this.fetchData();
    },
    async call(id){
      this.$baseConfirm("您确定呼叫吗", null, async () => {
        const {data, msg} = await callService({id,});
        let audio = new Audio()
        audio.src = data
        audio.play();
        this.$baseMessage(msg, "success");
        this.fetchData()
      });
    },
    async handleEdit(id, type) {
      if (type == 'eat') {
          this.$baseConfirm("您确定入座吗", null, async () => {
          const {msg} = await modifyQueuing({id, type,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      } else if (type == 'skip') {
        this.$baseConfirm("您确定过号吗", null, async () => {
          const {msg} = await modifyQueuing({id, type,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      } else if (type == 'cancel') {
        this.$baseConfirm("您确定取消此订单吗", null, async () => {
          const {msg} = await modifyQueuing({id, type,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      }  else if (type == 'print') {
        const {msg} = await modifyQueuing({id, type,});
        this.$baseMessage(msg, "success");
        const { data } = await orderContent({orderId:id,orderType:5});
        Object.keys(data).map(key=>{
          this.printData = data[key];
          this.$nextTick(() => {
            this.$refs.pdqhprint.printElement(key);
          });
        })
        this.fetchData()
      } else if (type == 'del') {
        this.$baseConfirm("您确定删除此订单吗", null, async () => {
          const {msg} = await modifyQueuing({id, type,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      }else {
        this.$baseMessage('敬请期待', "success");
        this.fetchData()
      }
    },
    chickScreen() {
      let routeData = this.$router.resolve({path: `/queuingcode?storeId=${this.storeId}`, query: {}});
      window.open(routeData.href, '_blank');
    },
    handleClick2(tab, event) {
      this.fetchData();
      this.page.currentPage=1
      this.list=[]
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    onSearch() {
      this.fetchData();
    },
    handletj() {
      this.$router.push({ path: 'deliverytongji' });
    },
  }
};
</script>
<style lang="scss" scoped>
.tableys{
  .el-button+.el-button {
    margin-left: 0px;
    margin-right: 10px;
  }
  .el-button{
    margin-right: 10px;
  }
}
</style>
